<template>
  <a-space class="site-input-group-wrapper" direction="vertical" size="middle">
    <a-input-group compact>
      <a-input v-model:value="timestamp" @change="convert" style="width: calc(100% - 200px)" />
      <a-button type="primary" @click="convert">>></a-button>
      <a-input v-model:value="dateformat" style="width: calc(100% - 200px)" />
      <a-tooltip title="copy git url">
        <a-button>
          <template #icon>
            <CopyOutlined />
          </template>
        </a-button>
      </a-tooltip>
    </a-input-group>
  </a-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CopyOutlined } from '@ant-design/icons-vue'

const timestamp = ref<number>(Date.now() / 1000)
const dateformat = ref<string>('')

const convert = () => {

  const date = new Date(timestamp.value * 1000)
  // 使用 Date 对象的方法获取年月日、时分秒等信息
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份是从 0 开始计数的，需要加 1
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')

  // 返回格式化后的时间字符串
  dateformat.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

</script>


<style scoped>
.site-input-group-wrapper .site-input-split {
  background-color: #333;
}

.site-input-group-wrapper .site-input-right {
  border-left-width: 0;
}

.site-input-group-wrapper .site-input-right:hover,
.site-input-group-wrapper .site-input-right:focus {
  border-left-width: 1px;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right {
  border-right-width: 0;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
  border-right-width: 1px;
}

[data-theme='dark'] .site-input-group-wrapper .site-input-split {
  background-color: transparent;
}
</style>
